<template>
    <el-form :model="properties" ref="formRef" :rules="formRules" labelWidth="auto">
        <el-form-item label="组件编码" prop="code">
            <el-input v-model="properties.code" placeholder="组件编码" clearable />
        </el-form-item>

        <el-form-item label="label名称" prop="labelName">
            <el-input v-model="properties.labelName" placeholder="label名称" clearable />
        </el-form-item>

        <el-form-item label="启用箭头控制" prop="isArrowControl">
            <el-switch v-model="properties.isArrowControl" />
        </el-form-item>

        <el-form-item label="启用范围" prop="isRange">
            <el-switch v-model="properties.isRange" />
        </el-form-item>

        <el-form-item label="显示提示内容" prop="commonPlaceholder" v-if="!properties.isRange">
            <el-input v-model="properties.commonPlaceholder" placeholder="显示提示内容" clearable />
        </el-form-item>

        <el-form-item label="开始-提示内容" prop="startPlaceholder" v-if="properties.isRange">
            <el-input v-model="properties.startPlaceholder" placeholder="开始-提示内容" clearable />
        </el-form-item>

        <el-form-item label="结束-提示内容" prop="endPlaceholder" v-if="properties.isRange">
            <el-input v-model="properties.endPlaceholder" placeholder="结束-提示内容" clearable />
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="YwuFormTimeDrawer">
import {computed, defineProps, ref} from "vue";

let props = defineProps(['properties']);

let properties = computed(() => {return props['properties']})

const formRef = ref(null)

const formRules = ref({
    labelName: [
        { required: true, message: '请输入label名称', trigger: 'blur' }
    ],
    code: [
        { required: true, message: '请输入组件编码', trigger: 'blur' }
    ],
    commonPlaceholder: [
        { required: true, message: '请输入显示提示内容', trigger: 'blur' }
    ],
    startPlaceholder: [
        { required: true, message: '请输入开始-提示内容', trigger: 'blur' }
    ],
    endPlaceholder: [
        { required: true, message: '请输入结束-提示内容', trigger: 'blur' }
    ]
})

const validateForm = () => {
    return formRef.value?.validate()
}

defineExpose({
    validateForm
})
</script>

<style scoped lang="less">

</style>